<template>
    <div class="swiper-container">  
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in slides" :key="item.id">
          <img :src="item.imgUrl" alt="" v-if="slides.length > 0">
        </div>
      </div>
   
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </template>
  
  <script>
  
  import Swiper from 'swiper'
  import "swiper/css/swiper.min.css"
  import { getLoop } from '@/api/request'
  export default {
    name: 'SwiperImg', 
    data() {
      return {
        slides: []  
      }
    },
   
    created() { 
    },
    mounted() {
      getLoop(5).then(res => {
        console.log("getLoop", res);
        this.slides = res.data
        this.$nextTick(function () {
          new Swiper('.swiper-container', {
            direction: 'horizontal',
            loop: true,
            
            autoplay: {
              delay: 2000, 
              disableOnInteraction: false 
            },
            pagination: {
              el: '.swiper-pagination',
            },
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev', 
            }
          })
        })
      })
    }
  }
  </script>
  
  <style scoped>
  
  .swiper-container {
  position: absolute;
   top: -50px;
    width: 1128px; 
    height: 400px; 
    position: relative;
    margin: 0 auto;
    border-radius: 15px;
  }
  
  .swiper-wrapper {
    width: 100%;
    height: 100%;
  }
  
  .swiper-slide {
    width: 100%;
    height: 100%;
    text-align: center;
  }
  
  .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
  }
  
  .swiper-pagination {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
  }
  
  .swiper-button-prev,
  .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
  }
  
  .swiper-button-prev {
    left: 20px;
  }
  
  .swiper-button-next {
    right: 20px;
  }
  
  .swiper-button-prev::after,
  .swiper-button-next::after {
    font-size: 20px;
  }
  </style>
  
  